<!-- 订单备注页面 -->
<template name='select_input'>
	<view @click.stop class="add-goodss">
		<text selectable="true" class="riskTitle" id="boxLeft">
			<text class="status0" v-if="bitian">*</text>
			{{title}}：
		</text>
		
		<view class="flex flex1 h100" id="box">
			<input  
			:value="select.value"  
			placeholder="输入内容"
			placeholder-class="placeholder-class"
			class="search-ipu"
			@input="onInput"
			@confirm="inputEmit"
			@focus="calculateLeftBorder()"
			style="position: relative;z-index: 10;"
			/>
			<view class="input-but" @click="$emit('addSelectInput',{})" v-if="showAddBut">点击新增</view>
		</view>
		
		<!-- 待选数据 -->
		<view class="misk-my" v-if="select.mask==true" 
		@click="select.mask=false"></view>
		
		<view class="w100-my tab-user-my" 
		style="position: absolute;z-index: 12;height: 300px;background-color: #fff;"
		:style="{left: select.left,width:select.width,top:select.top}"
		v-show="select.list.length >0 && select.mask==true"
		>
			<view class="boxsss100" style="height: auto;">
				<table >
					<!-- 表头 -->
					<thead>
						<tr >
							<th style="max-width: 15px;width: 15px;">序</th>
							<th>名称</th>
						</tr>
					</thead>
					<tbody>
						<!-- 内容 -->
						<tr v-for="(item,index) in select.list" 
						:key="index"
						@click="selectDataCheck(index)"
						>
							<td>{{index+1}} </td>
							
							<td>{{item.name}}</td>
						</tr>
					</tbody>
				</table>
			</view>
		</view>
		<!-- 数据列表end -->
		
	</view>
</template>
<script>
	
	export default{
		name:'select_input',
		components: {
		},
		data(){
			return{
				select:{
					value:'',
					list:[],
					index:-1,
					checkedId:'',
					width:'',
					left:'',
					mask:false,
					top:0
				},
			}
		},
		 // 此处定义传入的数据
		props: {
			/**
			 * 是否必填项
			*/
			bitian:{
				type:Boolean,
				default :false
			},
			/**
			 * 默认选中
			*/
			showAddBut:{
				type:Boolean,
				default :false
			},
			/**
			 * 默认选中
			*/
			value:{
				type:String,
				default :''
			},
			/**
			 * 源数组
			*/
			searchList: {
				type: Array,
				default: () => {
					return []
				}
			},
			/**
			 * 标题
			*/
			title: {
				type:String,
				default :''
			},
		},

		created() {
			this.select.value = this.value;
			// 要查找的id值
			var searchName = this.value;
			// 数组
			var originalArray = this.searchList
			if(searchName.length>0 && originalArray.length>0){
				for(var i=0;i<originalArray.length;i++){
					if(originalArray[i].name == searchName){
						var foundObject = originalArray[i]
						this.select.value     = foundObject.name
						this.select.checkedId = this.value
						this.select.index     = 0
						this.select.list.push(foundObject)
					
						
					}
				}
			
			}
		},
		methods:{
			inputEmit(){
				this.$emit('input', this.select.value) 
				
			},
			 /*
			 * 搜索
			*/
			onInput(event){
			
				var data = this.select.value
				if(event && event.detail.value.length<=0){
					this.$emit('change','') 
				}
				if(event){
					this.$emit('input', event.target.value) 
					data = event.target.value
					
				}
				if(data.length<=0 ){
					this.select.list = this.searchList
				
				}else{
					// 要查找的字符串
					const searchString  = data;
					const originalArray = this.searchList;
					// 使用 filter 方法查找 name 属性中包含搜索字符串的对象
					const filteredArray = originalArray.filter(item => item.name.includes(searchString));
					this.select.list = filteredArray
				
				}
				this.select.mask = true
			},
			/**
			 * 计算下拉框的左边位置
			*/
			calculateLeftBorder(){
				var that = this
				const query = uni.createSelectorQuery().in(this);
				query.select('#box').boundingClientRect(data => {
					that.select.width = data.width+'px'
					that.select.top   = data.height+'px'
					
					//console.log(data)
				}).exec();
				query.select('#boxLeft').boundingClientRect(data => {
					that.select.left = data.width +'px'
					
					//console.log(data)
				}).exec();
				that.onInput()
			},
			/**
			 * 选中目录
			*/
			selectDataCheck(index){
				var item = this.select.list[index]
				this.select.value = item.name
				this.select.index  = index
				this.select.checkedId  = item.id
				this.select.mask  = false
				//(父组件中触发的事件名，要传的变量名)
				this.$emit('input',item.name) 
				this.$emit('change',item.id) 
			},
		}
	}
</script>

<style>
	.add-goodss{
		color: #1b1b1b;
		width: 350px;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-width: 280px;
		position: relative;
	}
</style>
